<template>
  <div class="header-bg">
    <div class="header">
      <div class="logo">
        <t-svg
          :svg-name="$store.state.locale === 'en' ? 'logo_en' : 'logo'"
          :style="{ width: $store.state.locale === 'en' ? '746px' : '326px' }"
        ></t-svg>
      </div>
      <div class="menus">
        <span class="lang-icon-box"> <t-svg svg-name="icon-locale" class="lang-icon"></t-svg> </span>
        <span class="lang-text" @click="changeLang">{{ $store.state.locale === 'en' ? '中文' : 'English' }}</span
        >&nbsp;丨&nbsp; <span class="full-name">{{ user.userFullName }}</span
        >&nbsp;丨&nbsp;<span @click="goUrl('feedback')">{{ $t('意见反馈') }}</span
        >&nbsp;丨&nbsp;<span @click="goUrl('index')">{{ $t('OA首页') }}</span
        >&nbsp;丨&nbsp;<span @click="quit">{{ $t('退出') }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import * as Cookies from 'js-cookie';
import { getUser } from '@/api/user';
import { sessionStorageRemove } from '@/utils/tools';

@Component({})
export default class HeaderComponent extends Vue {
  @Prop({
    default: '未登录',
  })
  name!: string;

  user = {
    userFullName: '',
  };
  mounted() {
    this.initPage();
  }

  async initPage() {
    const user = await getUser(); // 用户信息
    this.user = user;
    this.$store.commit('setUserInfo', user);
  }

  /** 更改语言 */
  changeLang() {
    const hosts = location.hostname.split('.');
    const domain = `.${hosts.slice(hosts.length - 2).join('.')}`;
    if (this.$store.state.locale === 'en') {
      Cookies.set('_JARVIS.LOCALE_', 'zh_CN', { domain, path: '/' });
      this.$i18n.locale = 'zh';
      this.$store.commit('setLang', 'zh');
    } else {
      Cookies.set('_JARVIS.LOCALE_', 'en_US', { domain, path: '/' });
      this.$i18n.locale = 'en';
      this.$store.commit('setLang', 'en');
    }
    window.location.reload();
  }

  goUrl(url: string) {
    if (url === 'feedback') {
      window.location.href = 'http://ce.oa.com/products/view/1042?&tab_id=all_issues_btn';
    } else if (url === 'index') {
      window.location.href = 'http://www.oa.com/';
    }
  }

  async quit() {
    // 清空登录态
    Cookies.set('token', '');
    Cookies.set('User', '');
    sessionStorageRemove('UserMenus');
    sessionStorage.removeItem('reconciliationRoleList');
    this.$store.commit('getUserInfo', {});

    Cookies.set('logoutHistory', window.location.href);
    window.location.href = `${window.location.origin}/logout`;
  }
}
</script>

<style scoped lang="less">
@import './index.less';
</style>
